<template>
  <div class="container" :style="'min-height: ' + $docHeight + 'px'">
    <div v-if="!showTimeOut && showCont">
      <div class="bannerCont">
        <img class="bannerImg" src="/img/banner/5.png" />
      </div>
      <div class="formCont">
        <div class="formTitle">需求发布信息完善</div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">岗位名称</div>
          </div>
          <input
            class="inputText"
            v-model="formInfo.position_name"
            maxlength="20"
            placeholder="请输入招募的岗位名称"
          />
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="inputName">
              <div class="mustIcon">*</div>
              <div class="inputNameText">岗位类型</div>
            </div>
          </div>
          <div class="inputOut">
            <div class="inputMask" @click="position_typeShow = true"></div>
            <input
              v-model="formInfo.position_type"
              placeholder="请选择岗位类型"
            />
          </div>
          <div
            @click="position_typeShow = true"
            class="iconfont icon-xiala"
          ></div>
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">岗位起薪</div>
          </div>
          <input
            class="inputText"
            v-model="formInfo.price_start"
            type="digit"
            maxlength="4"
            placeholder="岗位起薪(单位：千元)"
          />
          <div>千元/月</div>
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">岗位止薪</div>
          </div>
          <input
            class="inputText"
            v-model="formInfo.price_end"
            maxlength="4"
            type="digit"
            placeholder="岗位止薪(单位：千元)"
          />
          <div>千元/月</div>
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="inputName">
              <div class="mustIcon">*</div>
              <div class="inputNameText">年月薪数</div>
            </div>
          </div>
          <div class="inputOut">
            <div class="inputMask" @click="salary_monthShow = true"></div>
            <input
              v-model="formInfo.salary_month"
              placeholder="请选择年月薪数"
            />
          </div>
          <div
            @click="salary_monthShow = true"
            class="iconfont icon-xiala"
          ></div>
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="inputName">
              <div class="mustIcon">*</div>
              <div class="inputNameText">经验要求</div>
            </div>
          </div>
          <div class="inputOut">
            <div class="inputMask" @click="experienceShow = true"></div>
            <input v-model="formInfo.experience" placeholder="请选择经验要求" />
          </div>
          <div @click="experienceShow = true" class="iconfont icon-xiala"></div>
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="inputName">
              <div class="mustIcon">*</div>
              <div class="inputNameText">学历要求</div>
            </div>
          </div>
          <div class="inputOut">
            <div class="inputMask" @click="educationShow = true"></div>
            <input v-model="formInfo.education" placeholder="请选择学历要求" />
          </div>
          <div @click="educationShow = true" class="iconfont icon-xiala"></div>
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="inputName">
              <div class="mustIcon">*</div>
              <div class="inputNameText">工作城市</div>
            </div>
          </div>
          <div class="inputOut">
            <div class="inputMask" @click="position_cityShow = true"></div>
            <input
              v-model="formInfo.position_city"
              placeholder="请选择岗位工作城市"
            />
          </div>
          <div
            @click="position_cityShow = true"
            class="iconfont icon-xiala"
          ></div>
        </div>
        <div class="formInput">
          <div class="inputName">福利待遇</div>
          <div class="inputOut">
            <div class="inputMask" @click="welfare_treatmentShow = true"></div>
            <input
              v-model="activeWelfareStr"
              type="text"
              placeholder="请选择福利待遇"
            />
          </div>
          <div
            @click="welfare_treatmentShow = true"
            class="iconfont icon-xiala"
          ></div>
        </div>
      </div>
      <div class="formCont">
        <div class="formTitle flexTitle">
          <div class="formTitleMust">
            <div class="mustIcon">*</div>
            <div>工作内容</div>
          </div>
        </div>
        <div class="formArea">
          <!-- <textarea id="myTextarea" ref="myTextarea" placeholder="This is the first line.
    This is the second line.
    This is the third line." rows="4" cols="20"></textarea> -->
          <van-field
            v-model="formInfo.position_work_content"
            rows="4"
            autosize
            id="myTextarea"
            style="background: none; font-size: 0.7rem"
            type="textarea"
            maxlength="1000"
            placeholder="可以参考一下内容:
1.您的产品/公司/业务的简短介绍
2.需求的核心工作内容
3.对开发者的其他要求等"
            show-word-limit
          />
        </div>
      </div>
      <div class="formCont">
        <div class="formTitle flexTitle">
          <div class="formTitleMust">
            <div>技能要求</div>
          </div>
        </div>
        <div class="formArea">
          <!-- <textarea id="myTextarea" ref="myTextarea" placeholder="This is the first line.
    This is the second line.
    This is the third line." rows="4" cols="20"></textarea> -->
          <van-field
            v-model="formInfo.skill_requirements"
            rows="4"
            autosize
            id="myTextarea"
            style="background: none; font-size: 0.7rem"
            type="textarea"
            maxlength="1000"
            placeholder="请描述该岗位需要的技能要求,若无可不填。"
            show-word-limit
          />
        </div>
      </div>
      <div class="saveBtn" @click="subFn">确认发布</div>
    </div>
    <van-popup
      :close-on-click-overlay="false"
      v-model:show="position_typeShow"
      round
      position="bottom"
    >
      <div class="maskCont">
        <div class="maskHead">选择接单群体</div>
        <div class="maskCheck">
          <div
            @click="position_typeFn(item)"
            style="width: 48%"
            :class="
              item.id == position_typeId
                ? 'maskCheckItemActive maskCheckItem'
                : 'maskCheckItem'
            "
            :key="index"
            v-for="(item, index) in position_typeArr"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="maskBtn" @click="position_typeSureFn">确认选择</div>
      </div>
    </van-popup>
    <van-popup
      :close-on-click-overlay="false"
      v-model:show="position_cityShow"
      round
      position="bottom"
    >
      <div class="maskCont">
        <div class="maskHead">请选择岗位的工作城市</div>
        <van-area
          :columns-num="2"
          @change="position_cityChange"
          confirm-button-text=""
          cancel-button-text=""
          :area-list="areaList"
        />
        <div class="maskBtn" @click="position_citySureFn">确认选择</div>
      </div>
    </van-popup>
    <van-popup
      :close-on-click-overlay="false"
      v-model:show="salary_monthShow"
      round
      position="bottom"
    >
      <div class="maskCont">
        <div class="maskHead">请选择年月薪数</div>
        <van-picker
          @change="salary_monthChange"
          :show-toolbar="false"
          title="标题"
          :columns="mouthArr"
        />
        <div class="maskBtn" @click="salary_monthSureFn">确认选择</div>
      </div>
    </van-popup>
    <van-popup
      :close-on-click-overlay="false"
      v-model:show="educationShow"
      round
      position="bottom"
    >
      <div class="maskCont">
        <div class="maskHead">请选择学历要求</div>
        <van-picker
          @change="educationChange"
          :show-toolbar="false"
          title="标题"
          :columns="educationArr"
        />
        <div class="maskBtn" @click="educationSureFn">确认选择</div>
      </div>
    </van-popup>
    <van-popup
      :close-on-click-overlay="false"
      v-model:show="experienceShow"
      round
      position="bottom"
    >
      <div class="maskCont">
        <div class="maskHead">请选择经验要求</div>
        <van-picker
          @change="experienceChange"
          :show-toolbar="false"
          title="标题"
          :columns="experienceArr"
        />
        <div class="maskBtn" @click="experienceSureFn">确认选择</div>
      </div>
    </van-popup>
    <van-popup
      :close-on-click-overlay="false"
      v-model:show="welfare_treatmentShow"
      round
      position="bottom"
    >
      <div class="maskCont">
        <div class="maskHead">请选择企业福利</div>
        <div class="maskWork">
          <div class="workHot">
            <div
              :class="item.active ? 'hotItem hotItemActive' : 'hotItem'"
              @click="hotWorkFn(item)"
              :key="index"
              v-for="(item, index) in welfare_treatmentArr"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="maskBtn" @click="welfare_treatmentSureFn">选择完成</div>
      </div>
    </van-popup>
    <subLoad v-if="showSub"></subLoad>
  </div>
</template>
<script>
import { areaList } from "@vant/area-data";
import { showSuccessToast, showToast, showConfirmDialog } from "vant";
import subLoad from "@/components/public/subLoad.vue";
import { enterprisePosition } from "@/http/api";
export default {
  components: { subLoad },
  name: "",
  data() {
    return {
      showTimeOut: false,
      showCont: false,
      showSub: false,
      position_typeShow: false,
      position_cityShow: false,
      salary_monthShow: false,
      educationShow: false,
      experienceShow: false,
      formInfo: {
        position_name: "",
        price_start: "",
        price_end: "",
        salary_month: "12薪",
        position_type: "",
        position_work_content: "",
        skill_requirements: "",
        position_city: "",
        education: "",
        experience: "",
        welfare_treatment: "",
      },

      areaList: areaList,
      mouthArr: [
        { text: "12薪", value: "12薪" },
        { text: "13薪", value: "13薪" },
        { text: "14薪", value: "14薪" },
        { text: "15薪", value: "15薪" },
        { text: "16薪", value: "16薪" },
        { text: "17薪", value: "17薪" },
        { text: "18薪", value: "18薪" },
        { text: "19薪", value: "19薪" },
        { text: "20薪", value: "20薪" },
        { text: "21薪", value: "21薪" },
        { text: "22薪", value: "22薪" },
        { text: "23薪", value: "23薪" },
        { text: "24薪", value: "24薪" },
      ],
      // 福利
      activeWelfareStr: [],
      welfare_treatmentShow: false,
      welfare_treatmentArr: [
        { name: "餐饮福利", active: false },
        { name: "住房福利", active: false },
        { name: "交通福利", active: false },
        { name: "带薪休假", active: false },
        { name: "节日福利", active: false },
        { name: "生日福利", active: false },
        { name: "综合补贴", active: false },
        { name: "年终奖金", active: false },
        { name: "销售奖金", active: false },
        { name: "奖励计划", active: false },
        { name: "医疗保险", active: false },
        { name: "退休金计划", active: false },
        { name: "休假制度", active: false },
        { name: "培训与发展", active: false },
        { name: "灵活工作", active: false },
        { name: "健康检查", active: false },
        { name: "定时团建", active: false },
        { name: "住房公积金", active: false },
      ],
      educationArr: [
        { text: "学历不限", value: "学历不限" },
        { text: "专科及以上", value: "专科及以上" },
        { text: "本科", value: "本科" },
        { text: "硕士", value: "硕士" },
        { text: "博士", value: "博士" },
      ], //学历等级数组
      experienceArr: [
        { text: "经验不限", value: "经验不限" },
        { text: "一年以内", value: "一年以内" },
        { text: "1-3年", value: "1-3年" },
        { text: "3-5年", value: "3-5年" },
        { text: "5-10年", value: "5-10年" },
        { text: "10年以上", value: "10年以上" },
      ], //学历等级数组
      position_typeArr: [
        { name: "普通岗位", id: 1 },
        { name: "急聘岗位", id: 2 },
      ],
      position_typeId: 1,
    };
  },
  props: {},
  setup() {},
  methods: {
    getActiveWarlf() {
      let arr = [];
      for (let i = 0; i < this.welfare_treatmentArr.length; i++) {
        if (this.welfare_treatmentArr[i].active) {
          arr.push(this.welfare_treatmentArr[i].name);
        }
      }
      let str = "";
      if (arr.length == 0) {
        str = "";
      } else {
        str = "已选择" + arr.length + "项福利";
      }
      this.activeWelfareStr = str;
      this.formInfo.welfare_treatment = arr.join(",");
    },
    hotWorkFn(item) {
      item.active = !item.active;
    },
    welfare_treatmentSureFn() {
      this.getActiveWarlf();
      this.welfare_treatmentShow = false;
    },
    // 选择经验change函数
    experienceChange(selectedValues, selectedOptions) {
      this.formInfo.experience = selectedValues.selectedValues[0];
    },
    //选择学历
    experienceSureFn() {
      if (this.formInfo.experience == "") {
        this.formInfo.experience = "经验不限";
      }
      this.experienceShow = false;
    },
    // 选择学历change函数
    educationChange(selectedValues, selectedOptions) {
      this.formInfo.education = selectedValues.selectedValues[0];
    },
    //选择学历
    educationSureFn() {
      if (this.formInfo.education == "") {
        this.formInfo.education = "学历不限";
      }
      this.educationShow = false;
    },
    // 工作职位
    salary_monthChange(
      selectedValues,
      selectedOptions,
      selectedIndexes,
      columnIndex
    ) {
      this.formInfo.salary_month = selectedValues.selectedValues.join("-");
    },
    salary_monthSureFn() {
      if (this.formInfo.salary_month == "") {
        this.formInfo.salary_month =
          this.workArr[0].text + "-" + this.workArr[0].children[0].text;
      }
      this.salary_monthShow = false;
    },
    changeMoney(selectedValues, selectedOptions, selectedIndexes, columnIndex) {
      let start = parseInt(selectedValues.selectedValues[0]);
      this.setprice_end(start);
    },
    //选择城市
    position_cityChange(selectedValues, selectedOptions) {
      if (selectedValues.selectedOptions.length > 0) {
        this.formInfo.position_city = selectedValues.selectedOptions[1].text;
      }
    },
    position_citySureFn() {
      if (this.formInfo.position_city == "") {
        this.formInfo.position_city = "北京市";
      }
      this.position_cityShow = false;
    },
    //接单群体
    position_typeFn(item) {
      this.formInfo.position_type = item.name;
      this.position_typeId = item.id;
    },
    position_typeSureFn() {
      if (this.formInfo.position_type == "") {
        this.formInfo.position_type = "普通岗位";
      }
      this.position_typeShow = false;
    },
    subFn() {
      let data = { ...this.formInfo };
      data.position_type = this.position_typeId;
      if (!data.position_name) {
        showToast("请输入岗位名称");
        return false;
      } else if (!data.position_type) {
        showToast("请选择岗位类型");
        return false;
      } else if (!data.price_start) {
        showToast("请输入薪资(起)");
        return false;
      } else if (!data.price_end) {
        showToast("请输入薪资(止)");
        return false;
      } else if (Number(data.price_end) < Number(data.price_start)) {
        showToast("薪资范围有误");
        return false;
      } else if (!data.salary_month) {
        showToast("请输入年月薪数");
        return false;
      } else if (!data.experience) {
        showToast("请选择经验要求");
        return false;
      } else if (!data.education) {
        showToast("请选择学历要求");
        return false;
      } else if (!data.position_city) {
        showToast("请选择工作城市");
        return false;
      } else if (!data.position_work_content) {
        showToast("请输入工作内容");
        return false;
      }
      showConfirmDialog({
        title: "发布提示",
        message: "确认发布此岗位招募吗?",
      }).then(() => {
        this.showSub = true;
        enterprisePosition(data).then((res) => {
          if (res.data.code == 1) {
            showSuccessToast("发布成功");
          } else {
            showToast(res.data.msg);
          }
          this.showSub = false;
        });
      });
    },
  },
  mounted() {},
  created() {
    this.showCont = true;
  },
};
</script>
<style scoped lang="less">
.container {
  padding-bottom: 0.75rem;
  box-sizing: border-box;
  background-color: #f1f4fb;
  // padding-top: 0.75rem;
  .bannerCont {
    width: 100%;
    color: #fff;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    .bannerImg {
      width: 100%;
    }
  }
  .formCont {
    background-color: #fff;
    width: 92%;
    margin: 0 auto;
    position: relative;
    top: -2rem;
    // margin-top: -6rem;
    padding: 1rem 4%;
    border-radius: 0.75rem;
    box-sizing: border-box;
    margin-bottom: 1rem;
    .formTitle {
      font-size: 0.7rem;
      font-weight: bold;
      margin-bottom: 1rem;
    }
    .formInput {
      display: flex;
      padding: 0.75rem 1rem;
      box-sizing: border-box;
      align-items: center;
      width: 100%;
      background-color: #f1f4fb;
      margin-bottom: 1rem;
      border-radius: 1.5rem;
      .inputName {
        width: 4rem;
        position: relative;
        .mustIcon {
          font-size: 0.7rem;
          top: 0rem;
          left: -0.4rem;
          position: absolute;
          color: #ff5757;
        }
      }
      .resultTag {
        color: #5cc78e;
        font-size: 1rem;
      }
      .icon-xiala {
        width: 1.5rem;
        font-size: 0.8rem;
        color: #ccc;
        text-align: center;
      }
      .inputOut {
        flex: 1;
        width: 3rem;
        position: relative;
        .inputMask {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
        }
        input {
          width: 90%;
          border: none;
          background: none;
          outline: none;
        }
      }
      .inputText {
        flex: 1;
        width: 3rem;
        border: none;
        background: none;
        outline: none;
      }
    }
  }
  .flexTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .addComp {
      font-size: 0.65rem;
      font-weight: normal;
      color: #86a9fb;
    }
    .formTitleMust {
      position: relative;
      display: flex;
      .mustIcon {
        font-size: 0.7rem;
        top: 0rem;
        left: -0.4rem;
        position: absolute;
        color: #ff5757;
      }
    }
  }
  .formArea {
    background-color: #f1f4fb;
    border-radius: 0.25rem;
  }
  .maskCont {
    padding: 1.5rem 4%;
    box-sizing: border-box;
    .maskHead {
      width: 100%;
      text-align: center;
      font-size: 1rem;
      font-weight: bold;
      margin-bottom: 1.5rem;
    }
    .maskActiveVal {
      margin: 0.25rem 0 2rem;
      font-size: 1rem;
      text-align: center;
      color: #86a9fb;
    }
    .maskCheck {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .maskCheckItem {
        width: 46%;
        text-align: center;
        background-color: #f6f7f9;
        padding: 0.75rem 0;
        margin-bottom: 0.75rem;
        border-radius: 0.25rem;
      }
      .maskCheckItemActive {
        background-color: #86a9fb;
        color: #fff;
      }
    }
    .sildNum {
      margin: 0.25rem 0 2rem;
      font-size: 1.2rem;
      text-align: center;
      span {
        color: #86a9fb;
      }
    }
    .maskSild {
      width: 90%;
      margin: 0 auto;
      margin-bottom: 3rem;
    }
    .maskWork {
      width: 100%;
      .workInput {
        width: 100%;
        padding: 0.75rem;
        box-sizing: border-box;
        display: flex;
        border-radius: 2rem;
        overflow: hidden;
        align-items: center;
        background-color: #f6f7f9;
        input {
          flex: 1;
          margin-right: 0.75rem;
          border: none;
          outline: none;
          background: none;
        }
        .clearInput {
          color: #86a9fb;
        }
      }
      .maskWrokTip {
        width: 100%;
        font-size: 0.9rem;
        margin: 0.75rem 0;
      }
      .maskWorkDes {
        font-size: 0.6rem;
        color: #86a9fb;
        margin-top: 0.75rem;
        text-indent: 0.75rem;
      }
      .workHot {
        display: flex;
        flex-wrap: wrap;
        margin-top: 0.75rem;
        .hotItem {
          padding: 0.5rem 1rem;
          background-color: #f6f7f9;
          border-radius: 0.25rem;
          margin-bottom: 0.75rem;
          margin-right: 0.5rem;
        }
        .hotItemActive {
          background-color: #86a9fb;
          color: #fff;
        }
      }
    }
    .maskFlexBtn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .maskBtn {
        width: 46%;
      }
      .maskBtnDef {
        background: #fff;
        color: #86a9fb;
        border: 1px solid #86a9fb;
        box-sizing: border-box;
      }
    }
    .maskBtn {
      width: 100%;
      text-align: center;
      padding: 0.75rem 0;
      background-color: #86a9fb;
      border: 1px solid #86a9fb;
      color: #fff;
      border-radius: 2rem;
      margin-top: 1.5rem;
    }
    .disMaskBtn {
      opacity: 0.5;
    }
  }
  .maskCont {
    padding: 1.5rem 4%;
    box-sizing: border-box;
    .maskForm {
      width: 100%;
      .formTitle {
        font-size: 0.7rem;
        font-weight: bold;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        position: relative;
        .mustIcon {
          color: #ff5757;
          margin-right: 0.25rem;
        }
      }
      .upProduct {
        margin-bottom: 1.25rem;
      }
      .formInput {
        display: flex;
        padding: 0.75rem 1rem;
        box-sizing: border-box;
        align-items: center;
        width: 100%;
        background-color: #f1f4fb;
        margin-bottom: 1rem;
        border-radius: 1.5rem;
        .inputName {
          width: 4rem;
          position: relative;
          .mustIcon {
            font-size: 0.7rem;
            top: 0rem;
            left: -0.4rem;
            position: absolute;
            color: #ff5757;
          }
        }
        .resultTag {
          color: #5cc78e;
          font-size: 1rem;
        }
        .icon-xiala {
          width: 1.5rem;
          font-size: 0.8rem;
          color: #ccc;
          text-align: center;
        }
        .inputOut {
          flex: 1;
          width: 3rem;
          position: relative;
          .inputMask {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
          }
          input {
            width: 90%;
            border: none;
            background: none;
            outline: none;
          }
        }
        .inputText {
          flex: 1;
          width: 3rem;
          border: none;
          background: none;
          outline: none;
        }
      }
    }
    .maskHead {
      width: 100%;
      text-align: center;
      font-size: 1rem;
      font-weight: bold;
      margin-bottom: 1.5rem;
      .maskHeadTip {
        font-size: 0.6rem;
        font-weight: normal;
        color: #999;
        text-align: center;
      }
      .redTip {
        color: #ff5757;
      }
    }
    .workTimeCont {
      .workTimeItem {
        width: 100%;
        padding: 0.75rem;
        box-sizing: border-box;
        background-color: #f1f4fb;
        border-radius: 0.25rem;
        margin-bottom: 0.75rem;
        .timeItemHead {
          display: flex;
          align-items: center;
          margin-bottom: 0.75rem;
          .timeCheck {
            width: 1rem;
            height: 1rem;
            border: 1px solid #86a9fb;
            background-color: #fff;
            font-size: 1rem;
            border-radius: 0.25rem;
            text-align: center;
            line-height: 1rem;
            margin-right: 0.5rem;
            color: #fff;
          }
          .activeCheck {
            background-color: #86a9fb;
          }
          .timeHeadName {
            font-size: 0.8rem;
            font-weight: bold;
          }
        }
        .checkItem {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #333;
          margin-bottom: 0.5rem;
          .checkItemVal {
            display: flex;
            align-items: center;
            .iconfont {
              margin-left: 0.25rem;
              font-size: 0.8rem;
              color: #999;
            }
          }
        }
      }
    }
    .maskCheck {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .maskCheckItem {
        width: 30%;
        text-align: center;
        background-color: #f1f4fb;
        padding: 0.55rem 0;
        margin-bottom: 0.75rem;
        border-radius: 0.25rem;
        border: 1px solid #86a9fb;
        box-sizing: border-box;
        color: #86a9fb;
      }
      .maskCheckItemActive {
        background-color: #86a9fb;
        color: #fff;
      }
    }
    .sildNum {
      margin: 0.25rem auto 2rem;
      font-size: 1rem;
      text-align: center;
      span {
        color: #86a9fb;
      }
    }
    .smallText {
      font-size: 0.8rem;
    }
    .sliderCont {
      width: 80%;
      margin: 0 auto;
    }
    .maskCtrl {
      display: flex;
      justify-content: space-between;
      .maskBtn {
        width: 48%;
      }
      .whiteMaskBtn {
        background-color: #fff;
        color: #86a9fb;
      }
    }
    .maskBtn {
      width: 100%;
      text-align: center;
      padding: 0.6rem 0;
      background-color: #86a9fb;
      border: 1px solid #86a9fb;
      color: #fff;
      border-radius: 2rem;
      margin-top: 1.5rem;
    }
    .disMaskBtn {
      opacity: 0.5;
    }
  }
  .saveBtn {
    padding: 0.75rem 0;
    background-color: #86a9fb;
    color: #fff;
    text-align: center;
    border-radius: 2rem;
    width: 92%;
    margin: 0 auto 0.75rem;
  }
}
</style>
<style>
.van-calendar__day,
.van-calendar__selected-day,
.van-calendar__weekday,
.van-calendar__header-subtitle,
.van-calendar__header-title {
  font-size: 0.7rem;
}
</style>
